.self-center(@pos: absolute) {
  position: @pos;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.self-fill(@pos: absolute) {
  width: 100%;
  height: 100%;
  position: @pos;
  left: 0;
  top: 0;
  object-fit: cover;
}

.grandient-btn(@c1: #936ee9, @c2: #59e7b8) {
  background: linear-gradient(to left bottom, @c1, @c2) no-repeat right top;
}
.grandient(@c1: #936ee9, @c2: #59e7b8) {
  background: linear-gradient(to right top, @c1, @c2) no-repeat right top;
}

// 下划线动画
.line-container() {
  line-height: 2;
}
.line-grad(@c1:#936ee9, @c2: #59e7b9) {
  /* right-bottom 设置无鼠标经过时,背景图是在右下方开始的 */
  background: linear-gradient(to right, @c1, @c2) no-repeat right bottom;
  /* 宽度 高度 */
  background-size: 0 2px;
  transition: background-size 1300ms;
}
.line-sp-hover() {
  /* 鼠标经过后,强行将背景开始的方向从 右 变成了 左边，以至于最终效果是 左进右出 */
  background-position-x: left;
  background-size: 100% 2px;
}